<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Management</title>
</head>
<body>
<div class="container" id="container">
    <div id="files">
        <button class="open-dir" id="open-dir">打开文件夹</button>
        <div class="file-list" id="file-list"></div>
    </div>
    <div id="preview"></div>
</div>
</body>
</html>
<script>
    let fileList = document.getElementById('file-list');
    const previewContainer = document.getElementById('preview');

    // 渲染预览区
    const renderPreview = (fileDetail) => {
        previewContainer.innerHTML = '';
        let fileName = fileDetail.name;
        let reader = new FileReader();
        // 处理图片
        if (fileName.endsWith('.jpg') || fileName.endsWith('.png') || fileName.endsWith('.jpeg')) {
            const img = document.createElement('img');
            reader.onload = (e) => {
                img.src = e.target.result;
            }
            reader.readAsDataURL(fileDetail)
            previewContainer.appendChild(img);
        }
        else if (fileName.endsWith('.svg')){
            reader.onload = (e) => {
                previewContainer.innerHTML = e.target.result
            }
            reader.readAsText(fileDetail, 'utf-8')
        }
        else if (fileName.endsWith('.mp4')||fileName.endsWith('.mkv')||fileName.endsWith('.avi')) {
            const video = document.createElement('video');
            video.autoplay = true;
            reader.onload = (e) => {
                video.src = e.target.result;
            }
            reader.readAsDataURL(fileDetail)
            previewContainer.appendChild(video);
        }
        else {
            // 其他按照文本处理
            reader.onload = (e) => {
                previewContainer.innerText = e.target.result
            }
            reader.readAsText(fileDetail, 'utf-8')
        }
    }

    // 文件处理器
    const fileHandler = async (file, item) => {
        item.addEventListener('click', async (e) => {
            console.log('点击了文件')
            e.stopPropagation()
            const fileDetail = await file.getFile();
            renderPreview(fileDetail)
        })
    }

    // 目录处理器
    const dirHandler = (dir, item) => {
        item.addEventListener('click', (e) => {
            console.log('点击了文件夹')
            e.stopPropagation()
            item.className = item.className === 'dir' ? 'hide-dir' : 'dir'
        })
    }

    // 显示目录
    const showDir = async (node, handle) => {
        const entries = handle.entries();
        for await (const info of entries) {
            let file = info[1];
            let item = document.createElement('div');
            if (file.kind === 'directory') {
                item.className = 'hide-dir'
                dirHandler(file, item)
                showDir(item, file)
            } else {
                item.className = 'file'
                await fileHandler(file, item)
            }
            item.innerText = file.name
            node.appendChild(item);
        }
    }

    // 按钮绑定读取文件夹事件
    const btn = document.querySelector('#open-dir');
    btn.addEventListener('click', async () => {
        let dirDetail = await showDirectoryPicker();
        document.getElementById('file-list').innerHTML = '';
        await showDir(fileList, dirDetail);
    })

</script>
<style>
    body {
        margin: 0;
        background-color: #1d7fc0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .open-dir {
        height: 33px;
        width: 99px;
        border: none;
        box-shadow: rgba(0, 0, 0, .2) 2px 2px 5px;
        border-radius: 6px;
    }

    .container {
        margin-top: 10px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: rgba(0, 0, 0, .3) 5px 5px 10px;
        width: 80%;
        height: 500px;
        display: flex;
    }

    #files, #preview {
        overflow: auto;
    }

    #files::-webkit-scrollbar, #preview::-webkit-scrollbar {
        display: none;
    }

    #files {
        flex: 1;
        padding: 5px;
        background-color: #f9fff0;
        box-shadow: 2px 0 10px rgba(0, 0, 0, .1);
        z-index: 100;
    }

    #preview {
        flex: 2;
        padding: 8px;
        background-color: aliceblue;
        overflow: auto;
        z-index: 99;
    }

    #preview > img{
        width: 100%;
        object-fit: cover;
    }
    #preview > video{
        width: 100%;
        object-fit: cover;
    }

    .file, .dir, .hide-dir {
        padding: 5px;
        cursor: pointer;
        transition: all .15s ease-in-out;
        overflow: hidden;
    }

    .file:hover, .dir:hover, .hide-dir:hover {
        background-color: white;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, .1) 2px 2px 5px;
        transition: unset;
    }

    .file {
        color: #6e6e6e;
    }

    .hide-dir {
        color: #01deab;
    }

    .hide-dir > * {
        height: 0;
        padding: 0;
        border: none;
        margin: 0;
    }

    .dir {
        color: #01deab;
    }
</style>
